<template>
  <k-calendar
    :events="events"
    @dateClick="dateClick"
    @eventClick="eventClick"
    :eventContent="eventContent"
    displayEventEnd
  ></k-calendar>
</template>

<script lang="ts" setup>
import { EventClickArg, EventContentArg, EventInput } from '@fullcalendar/core'
import { DateClickArg } from '@fullcalendar/interaction'
import { ref } from 'vue'

let events = ref<EventInput[]>([
  {
    title: '购物',
    start: '2024-03-20 08:10',
    end: '2024-03-20 10:00',
    editable: true,
  },
  {
    title: '工作',
    start: '2024-03-20 10:00',
    end: '2024-03-20 12:00',
  },
  {
    title: '午饭',
    start: '2024-03-20 12:00',
    end: '2024-03-20 13:00',
  },
])

let dateClick = (info: DateClickArg) => {
  events.value.push({
    start: info.dateStr + ' 12:00',
    end: info.dateStr + ' 18:00',
    title: '学习',
  })
}

let eventClick = (info: EventClickArg) => {
  /* events.value.push({
    start: info.dateStr + '12:00',
    end: info.dateStr + '18:00',
    title: '学习',
  })  */

  console.log('EventClickArg', info)
}

let eventContent = (arg: EventContentArg) => {
  let el = document.createElement('div')
  let timeTextArr = arg.timeText.split('-')
  let startTime = timeTextArr[0].replace('上午', '')
  let entTime = timeTextArr[1].replace('下午', '')
  el.innerHTML = `
        <image src="../../../src/assets/vue.svg" style="weight: 10px; height: 10px"></image>
        <div>标题: ${arg.event._def.title} </div>
        <div> 开始时间: ${startTime} </div>
        <div>结束时间: ${entTime} </div>
      `
  return {
    domNodes: [el],
  }
}
</script>

<style lang="scss" scoped></style>
